@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

/* 整体暗色风格适配 */
html.dark {
  $border-style: #30354c;
  $color-white: #fff;

  --pro-tab-bg: var(--el-color-primary);
  --pro-tab-text-color: #ffffff;

  --bg-1: #1b1e2e;
  --bg-2: #25293c;
  --bg-3: #2f344a;
  --bg-4: #373b49;
  --bg-5: #445376;

  // --el-color-info: #484B5C;//信息主题色
  /*文字颜色*/
  --text-color: #ffffff;
  --text-color-title: #d6d6d6;
  --text-color-sub-title: #9996a4;
  --text-color-secondary-title: #999999;

  --bg-tree-list: #2d3141;
  --el-border-color: #323647;
  // --el-table-border: #30354c !important; // 表格每行底部边框
  --el-border-color-lighter: #30354c !important; //表格外层边框
  --el-bg-color: var(--bg-2);
  --el-disabled-bg-color: var(--bg-5);
  --el-fill-color: var(--bg-4);
  --el-fill-color-light: var(--bg-5);
  --el-mask-color: rgba(37, 41, 60, 0.8); //loading蒙层颜色

  /* 自定义深色背景颜色 */ // --bg-2: #020409;
  /* 常用border-color 需要时可取用 */
  --pure-border-color: rgb(253 253 253 / 12%);

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #ffffff3f;

  .navbar,
  .tags-view,
  .contextmenu,
  .sidebar-container,
  .horizontal-header,
  .sidebar-logo-container,
  .horizontal-header .el-sub-menu__title,
  .horizontal-header .submenu-title-noDropdown {
    background: var(--bg-2) !important;
  }

  .app-main {
    background: var(--bg-1) !important;
  }

  .app-main .el-scrollbar__view {
    background-color: var(--bg-1);
  }

  .main-content {
    //background-color: var(--bg-2);
  }

  .layout-theme-default
    body[layout="vertical"]
    .sidebar-container
    .el-menu
    .el-menu--inline
    .el-sub-menu__title,
  .layout-theme-default
    body[layout="vertical"]
    .sidebar-container
    .el-sub-menu
    .el-menu-item {
    background-color: var(--bg-3) !important;
  }

  .logic-flow-view,
  .wangeditor {
    filter: invert(0.9) hue-rotate(180deg);
  }

  /* 标签页 */
  .tags-view {
    .arrow-left,
    .arrow-right {
      border-right: 1px solid $border-style;
      box-shadow: none;
    }

    .arrow-right {
      border-left: 1px solid $border-style;
    }

    .scroll-item {
      .el-icon-close {
        &:hover {
          color: rgb(255 255 255 / 85%) !important;
          background-color: rgb(255 255 255 / 12%);
        }
      }
    }
  }

  /* 项目配置面板 */
  .right-panel-items {
    .el-divider__text {
      background-color: var(--bg-2);
    }

    .el-divider--horizontal {
      border-top: none;
    }
  }

  /* 表单设计器 */
  .design-form {
    .el-main.config-content,
    .el-header,
    .el-main.widget-empty,
    .widget-form-list,
    .el-aside,
    .widget-view {
      background: var(--bg-2) !important;
    }

    .form-edit-widget-label a {
      color: $color-white;
      background: var(--el-color-primary);
      border: none;
      border-radius: 5px;
    }

    .el-aside {
      color: $color-white;
    }
  }

  /* intro.js */
  .introjs-tooltip-title,
  .introjs-tooltiptext {
    color: var(--el-color-primary);
  }

  /* element-plus */
  /*table*/
  .el-table__cell {
    background: var(--bg-2) !important;
  }

  .is-leaf {
    background: var(--bg-3) !important;
  }

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    //border-bottom: 1px solid $border-style !important;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    //border-bottom: 1px solid $border-style !important;
  }

  .el-table__body tr:hover > td.el-table__cell {
    color: white;
    background-color: var(--bg-4) !important;
  }

  .el-date-table td.in-range .el-date-table-cell {
    background-color: var(--bg-4) !important;
  }

  /*table*/

  /*card*/
  .el-card {
    --el-card-bg-color: var(--bg-2);
  }

  /*card*/

  .el-backtop {
    --el-backtop-bg-color: rgb(72 72 78);
    --el-backtop-hover-bg-color: var(--el-color-primary);

    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  }

  .el-dropdown-menu,
  .el-select-dropdown {
    background-color: var(--bg-2) !important;
  }

  .el-dropdown-menu .el-dropdown-menu__item {
    background-color: var(--bg-2) !important;
  }

  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: transparent;
    //background-color: var(--bg-2) !important;
  }

  .el-select-dropdown__item.is-hovering {
    background-color: var(--bg-4);
  }

  .el-select-dropdown__item:hover {
    color: var(--el-color-primary) !important;
    background-color: var(--bg-5) !important;
  }

  .el-dialog {
    background-color: var(--bg-2) !important;

    .el-input__wrapper,
    .el-textarea__inner,
    .el-select__wrapper {
      background-color: rgba(27, 30, 46, 0.76) !important;
    }
  }

  .el-popper {
    border: none;
    background-color: var(--bg-2);
    color: white !important;

    .el-popper__arrow::before {
      border: none;
      background-color: var(--bg-2);
    }
  }

  .el-popper.el-cascader__dropdown,
  .el-popper.el-select__popper {
    background-color: var(--bg-2) !important;

    .el-popper__arrow::before {
      background-color: var(--bg-2) !important;
    }
  }

  .el-picker-panel {
    background-color: var(--bg-2) !important;
  }

  /*.el-tree*/
  .el-tree-node__content:hover,
  .is-current > .el-tree-node__content {
    color: var(--el-color-primary);
    background-color: var(--bg-4) !important;
  }

  /*.el-tree*/

  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
  .el-icon {
    &.el-dialog__close,
    &.el-drawer__close,
    &.el-message-box__close,
    &.el-notification__closeBtn {
      &:hover {
        color: rgb(255 255 255 / 85%) !important;
        background-color: rgb(255 255 255 / 12%);

        .pure-dialog-svg {
          color: rgb(255 255 255 / 85%) !important;
        }
      }
    }
  }

  /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，整体浅色风格在 src/style/element-plus.scss 文件进行了适配 */
  .pure-message {
    background-color: rgb(36 37 37) !important;
    background-image: initial !important;
    box-shadow:
      rgb(13 13 13 / 12%) 0 3px 6px -4px,
      rgb(13 13 13 / 8%) 0 6px 16px 0,
      rgb(13 13 13 / 5%) 0 9px 28px 8px !important;

    & .el-message__content {
      color: $color-white !important;
      pointer-events: all !important;
      background-image: initial !important;
    }

    & .el-message__closeBtn {
      &:hover {
        color: rgb(255 255 255 / 85%);
        background-color: rgb(255 255 255 / 12%);
      }
    }
  }

  /* 自定义菜单搜索样式 */
  .pure-search-dialog {
    .el-dialog__footer {
      box-shadow:
        0 -1px 0 0 #555a64,
        0 -3px 6px 0 rgb(69 98 155 / 12%);
    }

    .search-footer {
      .search-footer-item {
        color: rgb(235 235 235 / 60%);

        .icon {
          box-shadow: none;
        }
      }
    }
  }

  /* ReSegmented 组件 */
  .pure-segmented {
    color: rgb(255 255 255 / 65%);
    background-color: var(--bg-3);

    .pure-segmented-item-selected {
      background-color: var(--bg-5);
    }

    .pure-segmented-item-disabled {
      color: rgb(255 255 255 / 25%);
    }
  }

  /* 仿 el-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
  .pure-scrollbar {
    scrollbar-color: rgb(63 64 66) transparent;

    ::-webkit-scrollbar-thumb {
      background-color: rgb(63 64 66);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgb(92 93 96);
    }
  }
  .el-dialog,
  .el-dialog.pure-dialog {
    // border-radius: 16px !important;
    padding: 0 !important;
    .el-dialog__header {
      padding: 16px !important;
      border-bottom: 1px solid rgba(246, 247, 251, 0.1);
    }
    .el-dialog__body {
      padding: 16px !important;
    }
    .el-dialog__footer {
      padding: 0 16px 16px 16px !important;
    }
  }
  .el-upload--picture-card {
    background-color: rgba(27, 30, 46, 0.76) !important;
  }

  .el-table__empty-block {
    background-color: var(--bg-2);
  }

  .el-descriptions__label.is-vertical-label {
    color: #8f98a0 !important;
  }

  /*-----amap 地图右键菜单*/
  .amap-menu-outer {
    background-color: var(--bg-2);
  }
  .amap-menu-outer > li:hover {
    background-color: var(--bg-4) !important;
  }

  /*  图纸标点 tooltip */
  .click-map-maker {
    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
      background-color: var(--bg-4) !important;
    }
  }

  .el-radio__inner {
    --el-radio-input-border: 1px solid #767a90 !important;
  }
}
